<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>用户登录</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/validate.min.js"></script>
    <script src="js/messages_zh.js"></script>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>
<h1>用户登录</h1>

<form id="frm" action="<c:url context='${pageContext.request.contextPath}' value='/login'></c:url>" method="post">
    名字:<input type="text" name="name"> <br />
    密码:<input type="password" name="password"> <br />
    验证码 <input type="text" name="code">
    <img src="<c:url context='${pageContext.request.contextPath}' value='/code'></c:url>"><br/>
    <input type="submit" value="登录">

</form>
<script>
    $(function () {
        $("#frm").validate({
            rules: {
                name: {
                    required: true,
                    minLength: 2,
                    maxLength: 6
                },
                password: "required",
                code: "required"
            },
            messages: {
                name: {
                    required: "用户名必须输入",
                    minLength: "用户名最少是{0}个字符",
                    maxLength: "用户名最多是{0}个字符"
                },
                password: "密码必须输入",
                code: "验证码必须输入"
            }
        });
    });
</script>
</body>
</html>